<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><{:C('site_name')}></title>
<meta name="keywords" content="<{:C('keyword')}>" />
<meta name="description" content="<{:C('content')}>" />
<link rel="stylesheet" href="<{:STATICS}>/css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="<{:STATICS}>/css/jquery-ui.min.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="<{:STATICS}>/centaurus/css/compiled/theme_styles.css"/>
<link rel="stylesheet" href="<{:RES}>/css/style.css" type="text/css" media="all" />
</head>
<script type="text/javascript" src="<{:STATICS}>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.artDialog.js?skin=aero"></script>
<script type="text/javascript" src="<{:STATICS}>/js/iframeTools.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.form.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<{:RES}>/js/common.js"></script>

<script type="text/javascript">
var domid=art.dialog.data('domid');
// 返回数据到主页面
function closeIframe(url){
	var origin = artDialog.open.origin;
	origin.location.reload() ;
	setTimeout("art.dialog.close()", 100 )
}
</script>
<body style="background: #fff;">
<div class="conversation-wrapper" style=" margin: 0 35px;">
	<div class="conversation-content">
		<div class="conversation-inner"></div>
	</div>
	<div class="conversation-new-message">
		<form id="ajaxForm" action="<{:U('Message/chat')}>" method="post" class="form-horizontal form-validata">
			<div class="form-group">
				<textarea name="content" id="content" class="form-control" rows="2" placeholder="Enter your message..."></textarea>
			</div>
			<div class="clearfix">
				<button id="myBtn" type="submit" class="btn btn-success pull-right">Send message</button>
			</div>
			<input type="hidden" name="toID" value="<{$toUser['userid']}>">
			<input type="hidden" name="toName" value="<{$toUser['nickname']}>">
			<input type="hidden" name="toFace" value="<{$toUser['face']|getFace}>">
			<input type="hidden" name="fromID" value="<{$fromUser['userid']}>">
			<input type="hidden" name="fromName" value="<{$fromUser['nickname']}>">
			<input type="hidden" name="fromFace" value="<{$fromUser['face']|getFace}>">
		</form>
	</div>
</div>
</body>
</html>
<style type="text/css">
.form-horizontal .form-group{ margin: 0px 0px 10px 0px; }
.conversation-wrapper .conversation-body>.time:before{content:none;}
</style>
<script src="<{:STATICS}>/centaurus/js/jquery.slimscroll.min.js"></script>
<script type="text/javascript">
var uid=<{$fromUser['userid']}>;
var isget=true;
$(document).ready(function() {
	$('.conversation-inner').slimScroll({
	    height: '352px',
	    start:'bottom',
	    alwaysVisible: false,
	    railVisible: true,
	    wheelStep: 5,
	    allowPageScroll: false
	});
	var btnStr = $("#myBtn").html();
	$('#ajaxForm').ajaxForm({
		beforeSubmit:function(){
			$("#myBtn").attr('disabled','disabled').html('<i class="fa fa-spinner fa-spin"></i> loading');
		},
		success:function(responseText, statusText){
			$("#myBtn").removeAttr('disabled').html(btnStr);
			if (statusText == 'success') {
				if(responseText.state == 'SUCCESS'){
					$("#content").val("");
				}else{
					_alert(responseText.message);
				}			
			}else{
			 	alert('Lost Service');	
			}
		}
	}); 
	getChatMsg();
})

function getChatMsg(){
	$.ajax({ 
       url : '<{:U("Index/getChatMsg")}>',
       data:{"toid":<{$toUser['userid']}>,"fromid":uid}, 
       type : 'get', 
       timeout : 0, 
       success : function(txt){
			if(txt.status=="SUCCESS"){
				var html=createChatMsgHtml(txt.data,uid);
				$(".conversation-inner").append(html);
				$(".conversation-inner").scrollTop(900000);
			}
       }, 
       complete : function(){
       	   if(isget){
           	   setTimeout(function(){getChatMsg();}, 2000); 
           }
       } 
   }) 
}
</script>
